<template>
  <div class="test">
    <!-- <div>
      <div class="imageWrapper" ref="imageWrapper">test</div>
      <canvas id="my-qr-code"></canvas>
      <img :src="dataURL" v-if="dataURL" />
    </div>
    <button @click="makeImage">点我改为分享base64</button>
    <button @click="reset">点我改为分享链接</button>
    {{ shareInfo }}
    <share-bottom-btn :shareInfo.sync="shareInfo"></share-bottom-btn> -->
    <button @click="login">登录</button>
    <h1>{{ dataURL }}</h1>
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide v-for="index in 20" :key="index" :class="`test${index}`">
        {{ index }}
      </swiper-slide>
    </swiper>
  </div>
</template>
<script>
  // import ShareBottomBtn from '../../components/ShareBottomBtn.vue';
  import html2canvas from 'html2canvas';
  const defaultData = {
    title: '123',
    desc: '描述',
    link: 'https://jimu.movtile.com/',
    imgUrl: 'https://ketang-pub.movtile.com/channel/1639382194968_a8835227.jpg',
  };
  export default {
    components: {
      // ShareBottomBtn,
    },
    data() {
      return {
        shareInfo: { ...defaultData },
        dataURL: '',
        swiperOptions: {},
      };
    },
    computed: {},
    mounted() {},
    methods: {
      login() {
        this.$appService
          .login()
          .then((res) => {
            this.dataURL = res;
            this.$appService.toast({ msg: JSON.stringify(res) });
          })
          .catch((err) => {
            this.dataURL = err;
            this.$appService.toast({ msg: '123' });
          });
      },
      makeImage() {
        // 生成图片
        html2canvas(this.$refs.imageWrapper, {
          allowTaint: true,
          useCORS: true,
          scale: 2,
          dpi: 300, // 处理模糊
        }).then((canvas) => {
          console.log('===');
          this.dataURL = canvas.toDataURL('image/png');
          this.shareInfo = { ...this.shareInfo, image: this.dataURL };
        });
      },
      reset() {
        this.shareInfo = { ...defaultData };
      },
    },
  };
</script>
<style lang="less" scoped>
  .test {
    height: 100vh;
    .imageWrapper {
      color: blue;
      font-size: 24px;
    }
    button {
      width: 60%;
      height: 60px;
      margin: 20px auto;
      font-size: 20px;
    }
  }
  .swiper-slide {
    height: 100vh;
    font-size: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .test1 {
    background-color: rgba(yellow, 0.5);
  }
  .test2 {
    background-color: rgba(red, 0.5);
  }
  .test3 {
    background-color: rgba(blue, 0.5);
  }
</style>
